<!-- 汉字字符管理 -->
<template>
  <FormTableLayout>
    <template #form>汉字字符管理</template>
    <template #tools>
      <el-button :icon="Plus" type="primary" size="small" plain @click="handleClickBtnAdd">新建</el-button>
    </template>
    <template #default>
      <el-table :data="tableData" row-key="id" style="width: 100%" border scrollbar-always-on header-cell-class-name="table-header-row" empty-text="没有数据">
        <el-table-column prop="character" label="字符" width="120" />
        <el-table-column prop="structure_id" label="结构ID" width="120" />
        <el-table-column prop="radical_id" label="偏旁ID" width="120" />
        <el-table-column label="SVG路径" width="90">
          <template #default="scope">
            <el-image :src="scope.row.svg_path" style="width: 36px" />
          </template>
        </el-table-column>
        <el-table-column prop="stroke_count" label="笔画数" width="120" />
        <el-table-column />
        <el-table-column label="操作" width="190" header-align="content" align="content">
          <template #default="scope">
            <el-button type="primary" :icon="EditPen" @click="handleClickBtnEditPinYin(scope.row)" size="small" link>拼音</el-button>
            <el-button type="primary" :icon="Edit" @click="handleClickBtnEdit(scope.row)" size="small" link>编辑</el-button>
            <el-button type="danger" :icon="Delete" @click="handleClickBtnDelete(scope.row.id)" size="small" link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #other>
      <DrawersEdit ref="refDrawersEdit" @submited="handleDrawersEditSubmited" />
      <DrawersEditPinYin ref="refDrawersEditPinYin" @submited="handleDrawersEditSubmited" />
    </template>
  </FormTableLayout>
</template>

<script setup lang="ts">
import FormTableLayout from '@/layout/FormTableLayout.vue'
import { Plus, Edit, EditPen, Delete } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import DrawersEdit from './drawers/Edit.vue'
import DrawersEditPinYin from './drawers/EditPinYin.vue'
import Dal from '@/dal'

const refDrawersEdit = ref()
const refDrawersEditPinYin = ref()
const tableData = ref([])

/**
 * 点击添加按钮时的处理函数
 */
const handleClickBtnAdd = () => {
  if (refDrawersEdit.value) {
    refDrawersEdit.value.open({}, { title: '新建汉字字符' })
  }
}

/**
 * 点击编辑按钮时的处理函数
 */
const handleClickBtnEdit = (row: any) => {
  if (refDrawersEdit.value) {
    refDrawersEdit.value.open(row, { title: '编辑汉字字符' })
  }
}
/**
 *
 * @param row
 */
const handleClickBtnEditPinYin = (row: any) => {
  if (refDrawersEditPinYin.value) {
    refDrawersEditPinYin.value.open(row, { title: '编辑汉字字符' })
  }
}

/**
 * 点击删除按钮时的处理函数
 */
const handleClickBtnDelete = async (id: number) => {
  try {
    await Dal.Hanzi.Character.deleteById(id)
    await initData()
  } catch (error) {
    console.error('删除汉字字符失败', error)
  }
}

/**
 * 编辑抽屉提交后的处理函数
 */
const handleDrawersEditSubmited = async () => {
  await initData()
}

/**
 * 初始化表格数据
 */
const initData = async () => {
  const res = await Dal.Hanzi.Character.findAll()
  tableData.value = res.data
}

onMounted(async () => {
  await initData()
})
</script>
